<template>
	<view class="container">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" :fixed="true">
			<view slot="left" class="flex justify-between container-top" style="width:100%;margin: 0 20rpx 0 45rpx;">
				<view class="flex align-center" style="margin-right: 20rpx;">
					<view class="" style="font-size: 36rpx;margin-right: 10rpx;">
						广东
					</view>
					<view class="">
						<i class="fa fa-map-marker" style="font-size: 36rpx;" aria-hidden="true"></i>
					</view>
				</view>
				<view class="mian-top" @tap="hideModal">
					<view>
						<navigator url="../search/search" hover-class="none" style="display: flex;justify-content: center;background-color: #FFFFFF;">
							<view class="weui-cell__bd">
								<view class="cuIcon-search">
								</view>
								<input class="weui-input" name="input" placeholder-class="placeholder-input" placeholder="输入关键词搜索相关产品" />
							</view>
						</navigator>
					</view>
				</view>
				<view class="flex align-center">
					<i class="fa fa-bell-o" style="font-size: 50rpx;margin: 0 30rpx 0 10rpx;" aria-hidden="true"></i>
					<i class="fa fa-share-alt" style="font-size: 40rpx;" aria-hidden="true"></i>
				</view>
			</view>
		</hx-navbar>
		<view  style="padding: 30rpx;">
		<view class="" style="position: relative;">
			<swiper class="swiper" indicator-dots="true" interval="2000" :duration="500" indicator-color="rgba(255, 255, 255,1)" indicator-active-color="#26C594" circular="true">
			   <block v-for="(item,i) in banner" :key="i">
				<swiper-item>
					<image src="../../static/imgs/shoplb1.png" mode="aspectFill" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
				</swiper-item>
			   </block>
			</swiper>
			<view class="swiperyy1">
				
			</view>
			<view class="swiperyy2">
				
			</view>
		</view>
		</view>
		<view class="container-content">
			<view class="dating flex justify-between">
				<view class="dating-box flex justify-between align-center dating-left">
					<view class="">
						<view class="text-bold">
							<text class="text-xl">求购大厅</text>
							<text class="cuIcon-right text-sm"></text>
						</view>
						<view class="dating-box-fdwz">
							寻求销售商机
						</view>
					</view>
					<view class="">
						<image src="../../static/imgs/dating.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="dating-box flex justify-between align-center dating-right">
					<view class="">
						<view class="text-bold">
							<text class="text-xl">供应大厅</text>
							<text class="cuIcon-right text-sm"></text>
						</view>
						<view class="dating-box-fdwz">
							查找需求匹配
						</view>
					</view>
					<view class="">
						<image src="../../static/imgs/dating2.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="toutiao flex align-center">
				<view class="toutiao-img" style="position: relative;">
					<image src="../../static/imgs/headlines.jpg" mode="widthFix"></image>
					<view class="" style="position: absolute;bottom: 6rpx;right: 35rpx;color: #FFFFFF;">
						10月9日
					</view>
				</view>
				<view class="ggxw">
					<view class="flex align-center">
						<text class="xd"></text>
						<text>福建持续推进现代农业餐饮行业…</text>
					</view>
					<view class="flex align-center">
						<text class="xd"></text>
						<text>用汗水守护城市美丽</text>
					</view>
				</view>
			</view>
			<view class="hot">
				<view class="flex justify-between align-center title">
					<view class="text-xl text-bold">
						<view class="">
							热门产品
						</view>
					</view>
					<view class="text-lg ">
						去上热门
					</view>
				</view>
				<view class="product flex">
					<view class='swiper-container'>
						
					  <swiper class='swiper-block' autoplay='true' circular='true' current='0' @change='swiperChange' interval='5000' duration='1000'>
					    <block v-for="(item,index) in swiperImgUrls">
					      <swiper-item class='swiper-item' :key='index'>
					        <image @change='imageChange' src="../../static/imgs/license.png" class='slide-image' :class="swiperCurrent == index ? 'active' : ''" />
					      </swiper-item>
					    </block>
					  </swiper>
					  <!-- 自定义指示点dot -->
					  <view class="dots">
					    <block v-for="(item,index) in swiperImgUrls" :key="index">
					      <view class='dot' :class="swiperCurrent == index ? 'active' : ''"></view>
					    </block>
					  </view>
					</view>
					<!-- <view class="flex flex-direction">
						<view class="product-img">
							<image src="../../static/imgs/productimg1.png" mode="aspectFit"></image>
							<view class="product-bj"></view>
							<view class="product-bj2">
							</view>
						</view>
						<view class="">
							<view class="name">
								红叶李杆球
							</view>
							<view class="text-sm" style="color: #999999;">
								<text class="text-orange">￥180</text>/株
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="choice hot">
				<view class="flex justify-between align-center title">
					<view class="text-xl text-bold flex">
						<view class="" :class="switchs?'':'choicecolor'" @tap="switchhs(0)">
							最新供应
						</view>
						<view class="" :class="switchs?'choicecolor':''" @tap="switchhs(1)">
							最新求购
						</view>
					</view>
					<view class="text-lg ">
						更多供应
					</view>
				</view>
				<!-- 最新供应 -->
				<view class="" v-show="!switchs">
					<view class="supply flex">
						<view class="left">
							<image src="../../static/imgs/zxgyimg1.png" mode="widthFix"></image>
							<view class="text-sm">
								3562<i class="fa fa-eye" aria-hidden="true"></i>
							</view>
						</view>
						<view class="right">
							<view class="flex justify-between">
								<view class="text-bold" style="font-size: 34rpx;">
									银杏树
								</view>
								<view class="">
									<view class="circular circularouw"></view>
									<view class="circular circulartwo"></view>
									<view class="circular circularthree"></view>
								</view>
								<view class="addsc">
									添加到收藏
								</view>
							</view>
							<view class="text-gray">
								江苏省 徐州市
							</view>
							<view class="text-right text-gray">
								<text style="font-size: 32rpx;"><text class="text-sm">￥</text>1600</text>/株
							</view>
							<view class="flex icon-text align-center">
								<image src="../../static/imgs/zxgyicon1.png" mode="aspectFill"></image>
								<view class="text-gray text-sm">
									邳州市东来苗木基地
								</view>
							</view>
							<view class="ckxq" @click="details">
								查看详情
							</view>
						</view>
					</view>
					<view class="supply flex">
						<view class="left">
							<image src="../../static/imgs/zxgyimg2.png" mode="widthFix"></image>
							<view class="text-sm">
								592<i class="fa fa-eye" aria-hidden="true"></i>
							</view>
						</view>
						<view class="right">
							<view class="flex justify-between">
								<view class="text-bold" style="font-size: 34rpx;">
									多季玫瑰杯苗
								</view>
								<view class="">
									<view class="circular circularouw"></view>
									<view class="circular circulartwo"></view>
									<view class="circular circularthree"></view>
								</view>
								<!-- 	<view class="addsc">
								添加到收藏
							</view> -->
							</view>
							<view class="text-gray">
								辽宁 铁岭
							</view>
							<view class="text-right text-gray">
								<text style="font-size: 32rpx;"><text class="text-sm">￥</text>800</text>/株
							</view>
							<view class="flex icon-text align-center">
								<image src="../../static/imgs/zxgyicon2.png" mode="aspectFill"></image>
								<view class="text-gray text-sm">
									开原市宏伟苗圃
								</view>
							</view>
							<view class="ckxq" @click="details">
								查看详情
							</view>
						</view>
					</view>
					<view class="supply flex">
						<view class="left">
							<image src="../../static/imgs/zxgyimg3.png" mode="widthFix"></image>
							<view class="text-sm">
								2562<i class="fa fa-eye" aria-hidden="true"></i>
							</view>
						</view>
						<view class="right">
							<view class="flex justify-between">
								<view class="text-bold" style="font-size: 34rpx;">
									五叶地锦杯苗
								</view>
								<view class="">
									<view class="circular circularouw"></view>
									<view class="circular circulartwo"></view>
									<view class="circular circularthree"></view>
								</view>
								<!-- 	<view class="addsc">
								添加到收藏
							</view> -->
							</view>
							<view class="text-gray">
								河南省 南阳市
							</view>
							<view class="text-right text-gray">
								<text style="font-size: 32rpx;"><text class="text-sm">￥</text>180</text>/株
							</view>
							<view class="flex icon-text align-center">
								<image src="../../static/imgs/zxgyicon3.png" mode="aspectFill"></image>
								<view class="text-gray text-sm">
									南阳市绿化苗木公司
								</view>
							</view>
							<view class="ckxq" @click="details">
								查看详情
							</view>
						</view>
					</view>
				</view>

				<view class="" v-show="switchs">
					<view class="supply flex" style="margin: 30rpx 30rpx 30rpx 0;">
						<view class="right" style="margin-left: 0;">
							<view class="flex justify-between">
								<view class="text-bold" style="font-size: 34rpx;margin-bottom: 10rpx;">
									五叶地锦杯苗
								</view>
								<view class="">
									<view class="circular circularouw"></view>
									<view class="circular circulartwo"></view>
									<view class="circular circularthree"></view>
								</view>
								<view class="addsc">
									添加到收藏
								</view>
							</view>
							<view class="text-gray">
								<view class="">
									截止时间: 2020-10-15
								</view>
								<view class="">
									用苗地区: 福建省 龙岩市
								</view>
								<view class="">
									求购规格：杆径 30~30cm
								</view>
							</view>
							<view class="text-right text-gray">
								求购数量:<text style="font-size: 30rpx;margin:0 10rpx;font-weight: bold;">3</text> 株
							</view>
							<view class="flex icon-text align-center">
								<image src="../../static/imgs/touxian1.png" mode="aspectFill"></image>
								<view class="text-gray text-sm">
									180****2334
								</view>
							</view>
							<view class="ckxq" style="bottom: 25rpx;"  @click="detailsa">
								去报价
							</view>
						</view>
					</view>
					<view class="supply flex" style="margin: 30rpx 30rpx 30rpx 0;">
						<view class="right" style="margin-left: 0;">
							<view class="flex justify-between">
								<view class="text-bold" style="font-size: 34rpx;margin-bottom: 10rpx;">
									五叶地锦杯苗
								</view>
								<view class="">
									<view class="circular circularouw"></view>
									<view class="circular circulartwo"></view>
									<view class="circular circularthree"></view>
								</view>
								<view class="addsc">
									添加到收藏
								</view>
							</view>
							<view class="text-gray">
								<view class="">
									截止时间: 2020-10-15
								</view>
								<view class="">
									用苗地区: 福建省 龙岩市
								</view>
								<view class="">
									求购规格：杆径 30~30cm
								</view>
							</view>
							<view class="text-right text-gray">
								求购数量:<text style="font-size: 30rpx;margin:0 10rpx;font-weight: bold;">3</text> 株
							</view>
							<view class="flex icon-text align-center">
								<image src="../../static/imgs/touxian1.png" mode="aspectFill"></image>
								<view class="text-gray text-sm">
									180****2334
								</view>
							</view>
							<view class="ckxq" style="bottom: 25rpx;">
								去报价
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 底部 -->
		<view class="cu-bar tabbar bg-white">
			<view class="action text-green">
				<view class="cuIcon-homefill"></view> 首页
			</view>
			<view class="action text-gray">
				<view class="cuIcon-similar"></view> 分类
			</view>
			<view class="action text-gray add-action">
				<button class="cu-btn cuIcon-add bg-green shadow"></button>
				发布
			</view>
			<view class="action text-gray">
				<view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				购物车
			</view>
			<view class="action text-gray">
				<view class="cuIcon-my">
					<view class="cu-tag badge"></view>
				</view>
				我的
			</view>
		</view>

	</view>
</template>

<script>
import 'static/css/font-awesome.min.css';
export default {
    data() {
        return {
			banner: ['color1', 'color2', 'color3'],
            switchs: 0,
			swiperImgUrls: [
			  '../../static/imgs/dating2.png',
			  '../../static/imgs/dating2.png',
			  '../../static/imgs/dating2.png',
			],
			 swiperCurrent: 0
        };
    },
    onLoad() {

    },
	
    methods: {
		 swiperChange(e) {
			 console.log(e)
		    const that = this;
		    that.swiperCurrent=e.detail.current;
			
	},
	 imageChange(e) {
		    const that = this;
		    that.swiperCurrent=e.currentTarget.id
			console.log(e)
		  },
		
		  /**
		   * 图片手动滑动时，获取当前的轮播id
		   */
		 
        switchhs(i) {
            this.switchs = i;
        },
		details(){
			uni.navigateTo({
			    url: '../details/supplydetails'
			});
		},
		detailsa(){
			uni.navigateTo({
			    url: '../details/fruitdetails'
			});
		}
    }
};
</script>

<style>
	.mian-top {
		flex: 1;
		height: 80rpx;
		z-index: 10;
		background-color: #FFFFFF;
	}

	.mian-top>view {
		padding-top: 20rpx;
	}

	.weui-cell__bd {
		width: 94%;
		border-radius: 50rpx/50rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		border: #FFFFFF 1rpx solid;
		background-color: #F5F5F5;
	}

	.placeholder-input {
		font-size: 24rpx;
	}

	.weui-input {
		font-size: 24rpx;
	}

	.weui-cell__bd .cuIcon-search {
		margin: 0 30rpx;
	}
	
	.swiper{
		position: relative;
		z-index: 10;
	}
	.swiperyy1{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 6%;
		background-color:#E5E5E5 ;
		border-radius: 20rpx;
		z-index: 5;
	}
	.swiperyy2{
		width: 95%;
		height: 100%;
		position: absolute;
		top: 12%;
		background-color:#F5F5F5 ;
		border-radius: 20rpx;
		z-index: 3;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.container-content>view+view {
		border-top: 2rpx #F5F5F5 solid;
	}

	.dating {
		padding: 30rpx;
	}

	.dating-box {
		width: 40%;
		height: 140rpx;
		padding: 0rpx 30rpx;
		border-radius: 10rpx;
	}

	.dating-left {
		background: url(../../static/imgs/hallimg1.jpg) 0 0 no-repeat;
		background-size: 100%;
	}

	.dating-right {
		background: url(../../static/imgs/hallimg2.jpg) 0 0 no-repeat;
		background-size: 100%;
	}

	.dating .dating-box image {
		width: 76rpx;
		height: 76rpx;
		border-radius: 10rpx;
	}

	.dating .text-bold {
		margin-bottom: 5rpx;
	}

	.dating .text-xl {
		color: #202021;
	}

	.dating-box-fdwz {
		color: #999;
	}

	.toutiao {
		padding: 30rpx;
	}

	.toutiao image {
		width: 200rpx;
	}

	.toutiao-img {
		margin-right: 20rpx;
	}

	.toutiao .xd {
		width: 8rpx;
		height: 8rpx;
		margin-right: 10rpx;
		background-color: #616161;
		display: inline-block;
	}

	.ggxw view+view {
		margin-top: 10rpx;
	}

	.hot {
		padding: 30rpx;
	}

	.hot .title {
		margin-bottom: 30rpx;
	}

	.hot .text-xl view {
		margin-right: 60rpx;
	}

	.hot .text-lg {
		width: 160rpx;
		line-height: 50rpx;
		height: 50rpx;
		background-color: #F5F5F5;
		border-radius: 50rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
	}

	.choicecolor {
		color: #28AD85;
	}

	.product-img {
		position: relative;
		width: 200rpx;
		height: 200rpx;
	}

	.product-img image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		position: relative;
		z-index: 4;
	}

	.product-bj {
		position: absolute;
		width: 90%;
		height: 90%;
		top: 5%;
		right: -7%;
		background-color: #E5E5E5;
		border-radius: 10rpx;
		z-index: 2;
	}

	.product-bj2 {
		position: absolute;
		width: 80%;
		height: 80%;
		top: 10%;
		right: -14%;
		background-color: #F5F5F5;
		border-radius: 10rpx;
		z-index: 1;
	}

	.product .name {
		color: #313032;
		font-size: 26rpx;
		margin-top: 10rpx;
		font-weight: bold;
	}


	/* 植物 */
	.supply {
		margin: 85rpx 0 20rpx 0;
		padding: 25rpx 20rpx;
		border: 2rpx #F5F5F5 solid;
		box-shadow: 5rpx 5rpx 10rpx #F1F1F1;
		border-radius: 15rpx;
		position: relative;
		margin-right: 30rpx;
	}

	.supply .left {
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
	}

	.supply .left image {
		width: 220rpx;
		border-radius: 15rpx;
	}

	.supply .left .text-sm {
		position: absolute;
		bottom: 8rpx;
		right: -10rpx;
		width: 110rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 50rpx;
	}

	.supply .right {
		margin-left: 252rpx;
		flex: 1;
	}

	.supply .right>view {
		margin-bottom: 10rpx;
	}

	.supply .right .flex.justify-between {
		position: relative;
		margin: 10rpx 0;
	}

	.supply .right .flex.justify-between .addsc {
		position: absolute;
		top: -20rpx;
		right: 20rpx;
		padding: 10rpx 25rpx;
		border: 1rpx #F5F5F5 solid;
		box-shadow: -5rpx 5rpx 10rpx #F1F1F1;
		border-radius: 15rpx;
		font-size: 24rpx;
	}

	.circular {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
	}

	.circular+.circular {
		margin-top: 5rpx;
	}

	.right .text-gray {
		color: #999999;
	}

	.circularouw {
		background-color: #4CD4A9;
	}

	.circulartwo {
		background-color: #79DFBF;
	}

	.circularthree {
		background-color: #BBEFDF;
	}

	.supply .right .text-right text {
		color: #FE522E;
	}

	.icon-text image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.supply .right .ckxq {
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		text-align: center;
		background-color: #28C695;
		box-shadow: -6rpx 6rpx 10rpx #D5F4EA;
		color: #FFFFFF;
		position: absolute;
		bottom: 10rpx;
		right: -30rpx;
		font-size: 22rpx;
	}
	
	
	
	.swiper-container {
	  position: relative;
	}
	
	.swiper-block {
	  height: 480rpx;
	  width: 100%;
	}
	
	.swiper-item {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: flex-start;
	  overflow: unset;
	}
	
	.slide-image {
	  height: 320rpx;
	  width: 520rpx;
	  border-radius: 9rpx;
	  box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
	  margin: 0rpx 30rpx;
	  z-index: 1;
	}
	
	.active {
	  transform: scale(1.14);
	  transition: all 0.2s ease-in 0s;
	  z-index: 20;
	}
	
	/* dot定位位置 */
	
	.swiper-container .dots {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 20rpx;
	  display: flex;
	  justify-content: center;
	}
	
	/* 未经过前dot */
	
	.swiper-container .dots .dot {
	  margin: 0 8rpx;
	  width: 14rpx;
	  height: 14rpx;
	  background-color: transparent;
	  border-radius: 8rpx;
	  border: 0.1rpx solid #31c27c;
	  transition: all 0.6s ease-in-out;
	}
	
	/* 经过后dot */
	
	.swiper-container .dots .dot.active {
	  width: 24rpx;
	  background: #31c27c;
	}
</style>
